<template>
  <!--内容添加和编辑-->
  <el-dialog title='广告商列表' :close-on-click-modal="false" v-model='editLoading' width='960px'  top='6vh'>
      <el-row :gutter='20'>
          <el-col :span='24'>
            <div class='navleft'>
              <div style='display:flex'>
                <el-input placeholder='请输入广告商昵称' v-model='queryParams.keyword' maxlength='20' size='mini'
                          style='width: 200px'>
                  <i slot='prefix' class='el-input__icon el-icon-search'></i>
                </el-input>
                <el-button type='success' size='mini' @click='handleSearch' icon='search'>搜索</el-button>
              </div>
              <div class='grid-content mt10'>
                <el-table
                  v-loading='tableLoading'
                  :data='tableData'
                  style='width: 100%;border:1px solid #eee;'>
                  <el-table-column label='广告商主昵称' align="center" prop='nickname'/>
                  <el-table-column label='电话号码' width='180' prop='telephone' align='center' />
                  <el-table-column label='广告主描述' align="center" prop='description'/>
                  <el-table-column label='金额' align="price" prop='fansCount'/>
                  <el-table-column label='操作' align="center">
                    <template #default="scope">
                      <el-button
                        size='mini'
                         :type='selectAdvertismentId==scope.row.id ?"danger":"primary"'
                        v-re-click
                        :loading='scope.row.loading'
                        icon='el-icon-menu'
                        @click='handleSelect(scope.$index, scope.row)'>选择广告主
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="kva-pagination-box center">
                <el-pagination :current-page="queryParams.pageNo" :page-size="queryParams.pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                               @current-change="handleCurrentChange" />
              </div>
            </div>
          </el-col>
        </el-row>
  </el-dialog>
</template>
<script setup>

import {
  findPages,
} from '@/api/advert/advertment.js'

// 搜索属性定义
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  status:"",
  keyword: ""
})

// 定义响应式得列表数据容器
const tableData = ref([])
const tableLoading = ref(false)
const pages = ref(0)
const total = ref(0)
const searchForm = ref({})
const editLoading = ref(false)
const selectAdvertismentId=ref("")
const handleLodeData = async () => {
  tableLoading.value = true
  const resp = await findPages(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total * 1
  pages.value = resp.data.pages * 1
}
// 分页pageNo更改
const handleCurrentChange = (pno) => {
  queryParams.pageNo = pno
  handleLodeData()
}
// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLodeData()
}

const handleOpen = async (selectAdvertismentIds) => {
  editLoading.value = true;
  selectAdvertismentId.value = selectAdvertismentIds
  handleLodeData()
}

const emits = defineEmits(["select"])
const handleSelect=(index, row)=>{
  emits('select',row)
 }

const handleClose=()=> {
  editLoading.value = false
}
// 把弹出打开得方法暴露给父组件进行调用
defineExpose({
  handleOpen,
  handleClose
})
</script>
<style scoped>

.page .wrap {
  background: #fff;
  padding: 10px;
  overflow: auto;
}

.navleft {
  border: 1px solid #eee;
  background: #fafafa;
  padding: 20px;
}


</style>
